<template>
  <el-dialog
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    title="请假信息修改"
    width="30%">
    <el-form :model="fm.ps" ref="formRef" :label-width="'100px'">
      <el-form-item
        label="姓名"
        prop="leaveUname"
        :rules="[{ required: true, message: '请选择请假人姓名', trigger: 'blur' }]">
        <el-select
          :disabled="true"
          filterable
          style="width: 100%" v-model="fm.ps.name" placeholder="请选择请假人姓名">
          <el-option 
            v-for="item in staffOptions" 
            :key="item.leaveUname" 
            :label="item.realName"
            :value="item.leaveUname">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="请假类型"
        prop="mainTypeId"
        :rules="[{ required: true, message: '请选择请假主类型', trigger: 'blur' }]">
        <el-select
          filterable
          style="width: 100%"
          @change="handleChange"
          v-model="fm.ps.mainTypeId" 
          placeholder="请选择请假类型">
          <el-option v-for="item in leaveParent" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="请假类型"
        prop="childTypeId"
        :rules="[{ required: true, message: '请选择请假子类型', trigger: 'blur' }]">
        <el-select
          filterable
          style="width: 100%"
          v-model="fm.ps.childTypeId" 
          placeholder="请选择请假类型">
          <el-option v-for="item in leaveChild" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
          label="请假时间"
          prop="time"
          :rules="[{ required: true, message: '请选择请假时间', trigger: 'blur' }]">
        <el-date-picker
            style="width: 100%"
            v-model="fm.ps.time"
            type="datetimerange"
            range-separator="至"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item
          label="事由"
          prop="leaveReason"
          :rules="[{ required: true, message: '请输入请假事由', trigger: 'blur' }]">
        <el-input
            type="textarea"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 7 }"
            placeholder="姓名" v-model="fm.ps.leaveReason"/>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{ fm.sb.text }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import {getStaffCombo} from "@/api/services/common.service";
import {getLeaveTypeDict, getLeaveMainDict, checkLeave} from "@/api/services/common.service";
import {addLeaveInfo} from "@/api/services/personMan.service";


export default {
  name: "UpdateLeaveType",
  directives: {elDragDialog},
  props: ["state", "data"],
  components: {},
  data() {
    return {
      md: {state: this.state},
      fm: {
        fname: "addGroupFm",
        ps: {
          updId: '',
          name: '',
          leaveUname: '', // 请假人uname
          mainTypeId: '', // 请假主类型
          childTypeId: '',
          time: '',
          leaveStartTime: '', // 请假开始时间
          leaveEndTime: '',  //请假结束时间
          leaveReason: '', // 请假原因
        },
        sb: {
          load: false,
          text: "修改",
        },
      },
      loading: false,
      staffOptions: [],
      leaveParent: [],
      leaveChild: [],
    };
  },
  created() {
    this._getDict()
    if (this.data) {
      const {id, leaveUser, mainType, childType, leaveEndTime, leaveStartTime, leaveReason} = this.data
      this.fm.ps = {
        updId: id,
        leaveUname: leaveUser.uname,
        name: leaveUser.realName,
        mainTypeId: mainType.id,
        childTypeId: childType.id,
        time: [leaveStartTime, leaveEndTime],
        leaveEndTime,
        leaveStartTime,
        leaveReason,
      }
      this.handleChange(mainType.id, () => {
        this.fm.ps.childTypeId = childType.id;
      })
    }
  },
  methods: {
    _getDict() {
      getStaffCombo({isContainDriver: 1}).then(res => {
        this.staffOptions = res.data.map(item => ({
          ...item,
          leaveUname: item.baseUserId.uname,
          realName: item.baseUserId.realName
        }))
      })

      getLeaveMainDict({isFindAllMT: '', pid: 0}).then(res => {
        this.leaveParent = res.data
      })

      // getLeaveTypeDict({find: ''}).then(res => {
      //   this.leaveParent = res.data
      // })
    },

    handleChange(data, callback) {
      this.fm.ps.childTypeId = ''
      getLeaveMainDict({isFindAllMT: '', pid: data}).then(res => {
        this.leaveChild = res.data
        callback && callback()
      })
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },

    /**
     * 提交表单
     */
    onSubmit() {
      const {time} = this.fm.ps
      if (time && time.length !== 0) {
        this.fm.ps.leaveStartTime = time[0]
        this.fm.ps.leaveEndTime = time[1]
      }
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.fm.sb.load = true; // 添加按钮禁用效果
          let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
          addLeaveInfo(this.fm.ps).then((res) => {
            this.fm.sb.load = false; // 取消按钮禁用效果
            this.U.qclose(loading); // 关闭遮罩
            if (!res || res.code !== 1) {
              this.U.qerror(res.msg);
            } else {
              this.U.qsuccess(res.msg);
              this.closeMd();
              this.$emit("reloadDg");
            }
          }).catch(() => {
            this.U.qclose(loading);
          })
        }
      });
    },
  },
};
</script>